import {createRouter, createWebHistory} from "vue-router";
import {message} from "ant-design-vue";


const routes = [
    {
        path: '/',
        name: 'Front',
        component: () => import('../views/Home.vue'),
        children: [
            {
                path: '',
                name: 'Home',
                component: () => import('../views/blog/Blog.vue')
            },
            {
                path: '/blog/search',
                name: 'Search',
                component: () => import('../views/blog/Search.vue')
            },
            {
                path: '/blog/:id',
                name: 'BlogDetails',
                component: () => import('../views/blog/BlogDetails.vue')
            },
        ]
    },
    {
        path: '/login',
        name: 'Login',
        component: () => import('../views/auth/Login.vue')
    },
    {
        path: '/register',
        name: 'Register',
        component: () => import('../views/auth/Register.vue')
    },
    {
        path: '/admin',
        name: 'AdminDashboard',
        component: () => import('../views/admin/Admin.vue'),
        meta: {
            permission: 'user'
        },
        children: [
            {
                path: '',
                redirect: '/admin/profile'
            },
            {
                path: 'dashboard',
                name: 'Dashboard',
                component: () => import('../views/admin/Dashboard.vue'),
                children: [
                    {
                        path: '',
                        name: 'DashboardHome',
                        component: () => import('../views/admin/dashboard/DashboardHome.vue')
                    }
                ],
                meta: {
                    permission: 'admin'
                },
            },
            {
                path: 'blog',
                name: 'BlogManager',
                component: () => import('../views/admin/Article.vue'),
                children: [
                    {
                        path: '',
                        name: 'ArticleManager',
                        component: () => import('../views/admin/article/Blog.vue')
                    },
                    {
                        path: 'editor',
                        name: 'ArticleEditor',
                        component: () => import('../views/admin/article/BlogEditor.vue')
                    },
                    {
                        path: 'group',
                        name: 'GroupManager',
                        component: () => import('../views/admin/article/GroupManager.vue')
                    },
                    {
                        path: 'comment',
                        name: 'CommentManager',
                        component: () => import('../views/admin/article/CommentManager.vue')
                    },
                    {
                        path: 'trash',
                        name: 'TrashManager',
                        component: () => import('../views/admin/article/TrashManager.vue')
                    }
                ]
            },
            {
                path: 'user',
                name: 'UserPanel',
                component: () => import('../views/admin/UserPanel.vue'),
                children: [
                    {
                        path: '',
                        name: 'UserManager',
                        component: () => import('../views/admin/user/UserManager.vue')
                    }
                ]
            },
            {
                path: 'profile',
                name: 'ProfilePanel',
                component: () => import('../views/admin/Profile.vue'),
                children: [
                    {
                        path: '',
                        name: 'ProfileManager',
                        component: () => import('../views/admin/profile/ProfileManager.vue')
                    }
                ]
            }
        ]
    },
    {
        path: '/403',
        name: '403',
        component: () => import('../views/403.vue')
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

const checkPermission = async permission => {
    const userInfo = JSON.parse(window.localStorage.getItem('user'))
    console.log(userInfo)
    switch (permission) {
        case 'admin':
            return userInfo.level===0;
        case 'user':
            return userInfo!==undefined&&userInfo!==null
    }
}

/**
 * 导航守卫，校验用户的合法性
 */
router.beforeEach(async (to, from, next) => {
    // 用户过期检查
    // 账户过期时间
    const storgeExpireTime = window.localStorage.getItem('expireTime')
    const tokenExpireTime = storgeExpireTime ? new Date(parseInt(storgeExpireTime)) : null

    // 清除用户登录状态
    const removeUser = () => {
        message.warn('用户登录状态已经失效，请重新登录')
        window.localStorage.removeItem('token')
        window.localStorage.removeItem('user')
        window.localStorage.removeItem('expireTime')
    }

    // 断定用户登录状态
    if (tokenExpireTime === null) {
        if (window.localStorage.getItem('token') !== null) {
            removeUser()
        }
    } else if (new Date() > tokenExpireTime) {
        removeUser()
    }
    // 用户权限检查
    if (to.meta.permission===undefined || await checkPermission(to.meta.permission)) {
        next()
    } else {
        next('403')
    }
})

export default router